<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 星空</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }
        html,body {
            height: 100%;

        }
        body {
            background: linear-gradient(to bottom,#000 0%,#5788fe 100%);
        }
        .landscape {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: url('./1.png');
            background-size: 1000px 250px;
            background-repeat: repeat-x;
            background-position: center bottom;
        }
        .filter {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #f15757;
            animation: colorChange 30s ease-in-out infinite;
            animation-fill-mode: both;
        }


        @keyframes colorChange {
            0%,100% {
                opacity: 0;
            }
            50% {
                opacity: 0.5;
            }
        }
    </style>
</head>
<body>
    <div class="landscape"></div>
    <div class="filter"></div>
    <canvas id="canvas"></canvas>


    <script src="./round_item.js"></script>
    <script>
        let canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            initRoundPopulation = 80,
            round = []

        const WIDTH = document.documentElement.clientWidth,
              HEIGHT = document.documentElement.clientHeight

        canvas.width = WIDTH
        canvas.height = HEIGHT


        init()

        function init() {
            for (let i = 0;i < initRoundPopulation;i++) {
                round[i] = new RoundItem(i,Math.random() * WIDTH,Math.random() * HEIGHT,ctx)
                round[i].draw()
            }
        }

        function animate() {
            ctx.clearRect(0,0,WIDTH,HEIGHT)
            for (let star of round) {
                star.move()
            }
            window.requestAnimationFrame(animate)
        }



    </script>
</body>
</html>